<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-11-08 10:09:37
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-11-08 12:40:36
 * @FilePath: \web-components-box\components\ElementUI\TableForm\ToolBar.vue
 * @Description: 表格组件工具栏
-->

<script setup lang="ts">
import type { TableColumnItem } from '@/types/component'
import { ref } from 'vue';

const props = defineProps({
  btnTitle: {
    type: String,
    default: '按钮'
  },
  /* 隐藏toolBar左边菜单 */
  hideLeftMenu: {
    type: Boolean,
    default: true,
  },
  /* 是否显示检索图标 */
  showSearchIcon: {
    type: Boolean,
    default: true,
  },
  /* 是否显示检索条件 */
  showSearch: {
    type: Boolean,
    default: true,
  },
  /* 显隐列信息 */
  columns: {
    type: Array as () => TableColumnItem[],
  },
  /* 显隐列类型（transfer穿梭框、checkbox复选框） */
  showColumnsType: {
    type: String,
    default: "checkbox",
  },
})

const emits = defineEmits(['btnClick', 'download', 'refresh', 'search'])
// 显隐数据
const columnsValue = ref<TableColumnItem[]>([])
// 显隐列dialog的打开状态
const openColumnDialog = ref(false)
// 弹出层标题
const title = ref("显示/隐藏")

// 右侧列表元素变化
function dataChange(data) {
  for (let item in props.columns) {
    const key = props.columns[item].key;
    props.columns[item].visible = !data.includes(key);
  }
}

// 显示显隐列
const showColumn = () => {
  openColumnDialog.value = true
}

// 勾选
function checkboxChange(event, title) {
  if (props.columns) {
    props.columns.filter(item => item.title === title)[0].visible = event;
  }
}
console.log("显示《", props.hideLeftMenu);

</script>

<template>
  <div class="tool-bar">
    <div>
      <slot name="leftMenu"><el-button v-if="!props.hideLeftMenu" type="primary" @click="$emit('btnClick')">{{ props.btnTitle }}</el-button></slot>  
    </div>
    <div class="container-end">
      <div class="operate-item">
        <el-tooltip effect="dark" content="下载" placement="top">
          <el-button class="operate-icon" icon="Download" @click="$emit('download')" />
        </el-tooltip>
      </div>
      <div class="operate-item">
        <el-tooltip effect="dark" content="刷新" placement="top">
          <el-button class="operate-icon" icon="Refresh" @click="$emit('refresh')" />
        </el-tooltip>
      </div>
      <div v-if="props.columns" class="operate-item">
        <el-tooltip effect="dark" content="显隐列" placement="top">
          <el-button v-if="props.showColumnsType == 'transfer'" class="operate-icon" icon="Menu" @click="showColumn()" />
          <el-dropdown v-if="props.showColumnsType == 'checkbox'" trigger="hover" :hide-on-click="false">
            <el-button class="operate-icon" icon="Menu" />
            <template #dropdown>
              <el-dropdown-menu>
                <template v-for="item in props.columns" :key="item.dataIndex">
                  <el-dropdown-item>
                    <el-checkbox :checked="item.visible" :label="item.title" :disabled="item.disabled" @change="checkboxChange($event, item.title)" />
                  </el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-tooltip>
      </div>
      <div v-if="props.showSearchIcon" class="operate-item">
        <el-tooltip effect="dark" :content="props.showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
          <el-button class="operate-icon" icon="Search" @click="$emit('search')" />
        </el-tooltip>
      </div>
    </div>
    <el-dialog :title="title" v-model="openColumnDialog" append-to-body>
      <el-transfer
        :titles="['显示', '隐藏']"
        v-model="columnsValue"
        :data="props.columns"
        @change="dataChange"
      ></el-transfer>
    </el-dialog>
  </div>
</template>

<style scoped>
/* 表格工具栏 */
.tool-bar {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container-end {
  display: flex;
  justify-content: flex-end;
  height: 30px;
  /* 按钮样式 */
  :deep(.el-button--large) {
    height: 30px;
    padding: 0px;
    border-radius: 0px;
  }
  :deep(.el-button) {
    border: none;
  }
}
.operate-item {
  margin-left: 8px;
}
.operate-icon {
  width: 30px;
  height: 30px;
}
/* 按钮样式 */
:deep(.el-button--large) {
  height: 32px;
}
</style>